<template>
    <div class="map-container" :style="{pointerEvents:isOperable?'auto':'none'}">
		<component :is="curCom"></component>
    </div>
</template>
<script setup>
import AreaInfo from './components/AreaInfo.vue'
import GroundMap from './components/GroundMap.vue'
import { onBeforeUnmount, onMounted, reactive, ref , computed} from 'vue'
const props = defineProps({
	dataSetting: {
		type: Object,
		default: () => {}
	},
	isOperable: {
		type: Number,
		default: 0
	},
})
const curCom = computed(()=> {
	if(props.dataSetting.mapInfo.current === 'ground') {
		return GroundMap
	} else if(props.dataSetting.mapInfo.current === 'air') {
		return AreaInfo
	}
})
onMounted(() => {
	console.log(props.dataSetting);
	
});
onBeforeUnmount(() => {});
</script>
<style scoped lang='scss'>
.map-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	position: relative;
}
</style>
